<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动画</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
    <!-- 子女第一两组样式 来控制 transition 内部元素实现的动画 -->
    <style>
        
        /* .v-enter 【这是一个时间点】 是进入之前 元素起始的状态 此时还没有进入 */
        /* .v-leave-to 这是动画离开之后 离开的终止状态 此时 元素已经离开了动画 已经结束了 这也是一个时间点 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(100px)
        }

        /* .v-enter-active 入场动画的时间段  */
        /* .v-leave-active 离开场动画的时间段 */
        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }


        /* 自定义动画名 通过transition 里面的name来控制 */

        /* .v-enter 【这是一个时间点】 是进入之前 元素起始的状态 此时还没有进入 */
        /* .v-leave-to 这是动画离开之后 离开的终止状态 此时 元素已经离开了动画 已经结束了 这也是一个时间点 */
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(200px)
        }

        /* .v-enter-active 入场动画的时间段  */
        /* .v-leave-active 离开场动画的时间段 */
        .my-enter-active,
        .my-leave-active {
            transition: all 5s ease;
        }
        .ball{
            width: 15px;
            height: 15px;
            background: red;
            border-radius: 50%;
        }


        li{
            border: 1px dashed black;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            width: 100%;
        }

        li:hover {
            background: blue;
            transition: all 2s ease;
        }
        

        /* v-move和 .v-leave-active 配合使用 可以实现列表后续的元素 不用排队*/
        .v-move {
            transition: all 1s ease;
        }
        .v-leave-active{
            position: absolute
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="flag=!flag">1</button>
        <!-- 点击按钮 让h3显示 在点击 隐藏 -->
        <!-- 使用 transition 元素 吧需要被动画控制的元素包裹起来 -->
        <!-- 这个元素 是vue官方提供的 -->
        <transition name="my">
            <h3 v-if="flag">
                这是一个h3
            </h3>
        </transition>
        <hr>

        <button @click="flag2=!flag2">2</button>

        <button @click="flag3=!flag3">小球咚咚咚</button>
        <transition name="ball" 
        @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <div class="ball" v-show="flag3">

                    </div>
        </transition>
        








        <!-- 点击按钮 让h3显示 在点击 隐藏 -->
        <!-- 使用 transition 元素 吧需要被动画控制的元素包裹起来 -->
        <!-- 这个元素 是vue官方提供的 -->

        <!-- 现在是用 animated 操作入场立场 -->
        <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
            <h3 v-if="flag2">
                这是一个h6
            </h3>
        </transition> -->

        <!-- 现在是直接在元素class加上animated 则无需绑定两个 -->
        <!-- 使用:duration统一设置离场入场的时长 毫秒单位 -->
        <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400">
                <h3 v-if="flag2" class="animated">
                    这是一个h6
                </h3>
            </transition> -->

            <!-- 此时是分开设置 入场200毫秒 离开400  :duration="{enter:200,leave:400}"-->
            <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
                    <h3 v-if="flag2" class="animated">
                        这是一个h6
                    </h3>
                </transition>
                

                <ul>
                    <div>
                        <label>
                            id
                            
                            <input type="text" v-model="id">
                            
                        </label>
                        <label>
                                name
                                
                                <input type="text" v-model="name">
                                
                            </label>
                            <button @click="add">添加</button>
                    </div>

                    <!-- <ul> -->
                        <!-- 在实现列表添加的时候 如果要过度 是通过 v-for循环渲染出来的 不可以使用 transition 需要使用 transition-group 加上appeat 可以实现入场渐渐往上飘的效果-->
                        <!-- 通过 transition-group 设置 tag="ul"
                        页面渲染的元素 如果不指定 默认span-->
                    <transition-group appear tag="ul">
                                        
                            <li v-for="(item, index) in list" :key="item.id" @click="del(index)">{{item.id}}---{{item.name}}</li>

                    </transition-group>


                <!-- </ul> -->


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false,
                flag3: false,
                id: '',
                name: '',
                list: [
                    {id: 1, name: '赵高'},
                    {id: 2, name: '赵高2'},
                    {id: 3, name: '赵高3'},
                    {id: 4, name: '赵高4'}
                ]
            },
            methods: {
                add(){
                    this.list.push({id: this.id, name: this.name})
                    this.id = this.name = ""
                },
                // 动画狗子函数的第一个函数 el 表示要执行动画那个dom元素 是个原生的js对象 可以认为 el 是通过 document.getelementByid('') 获取到的js dom原生对象
                beforeEnter(el) {
                    // 入场前
                    // 这是设置小球的起始位置
                    el.style.transform = "translate(0, 0)"
                },
                enter(el, done) {
                    // 过度动画效果
                    el.offsetWidth
                    // 入场中
                    // 设置小球完成动画的结束状态
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = "all 1s ease"
                    el.style.background = "blue"
                    // 这里的done 就是afterEnter 意思就是 ：done是一个函数的引用 引用了afterEnter 完成马上隐藏
                    done()
                },
                afterEnter(el) {
                    // 入场后
                    // el.style.display= "none"
                    this.flag3 = !this.flag3
                },
                del(index) {
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>